<template>
<div id="mains">
    <header class="we-header">
        <i class="fa fa-chevron-left" @click='$router.push("/home")'></i>
        <h3>海外疫情</h3>
    </header>
    <div class="api-t api-st">
        <div class="t-thead" ref="firstRowLayer">
            <table width="100%">
                <thead>
                    <tr>
                        <th width="20%" class="tab-item" v-for="(item,i) in theadList" :key="i">
                            {{item}}
                        </th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
    <div id="contents">
        <div class="t-tbody" ref="tableContainer" @scroll="tableDivScroll">
            <table width="100%">
                <tbody>
                    <tr v-for="(item,i) in epidemicList" :key="i">
                        <td width="20%">{{item.name}}</td>
                        <td width="20%">{{item.confirmAdd}}</td>
                        <td width="20%">{{item.confirm}}</td>
                        <td width="20%">{{item.heal}}</td>
                        <td width="20%">{{item.dead}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
</template>

<script>
export default {
    name: "chrome",
    data() {
        return {
            theadList: ["地区","新增确诊","累计确诊","治愈人数","死亡人数"],
            epidemicList: [],
        }
    },
    mounted() {
        this.getOverseasEpidemic()
    },
    methods: {

        tableDivScroll() {
            this.$refs.firstRowLayer.scrollLeft = this.$refs.tableContainer.scrollLeft
        },

        getOverseasEpidemic() {
            this.axios.get("https://api.inews.qq.com/newsqa/v1/automation/foreign/country/ranklist").then(res => {
                console.log(res.data);
                this.epidemicList = res.data.data
            })
        }
    },
    watch: {
        
    },
}
</script>

<style scoped>
#mains .we-header {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    border-bottom: 1px solid #b3b2b2;
    text-align: center;
    background-color: #54ffe8;
    box-shadow: 0 2px 6px #b3b2b2;
}
#mains .we-header>i {
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    height: 50px;
    line-height: 50px;
    background-color: #b7eeff;
}
#mains .we-header>i:hover {
    background-color: #59d8ff;
}
#mains .we-header>h3 {
    overflow: hidden;
    width: 100%;
    height: 50px;
    line-height: 50px;
    padding-left: 50px;
    padding-right: 50px;
    white-space: nowrap;
    text-overflow: ellipsis;
}
#mains .api-t {
    height: 45px;
    line-height:45px;
    text-align: center;
    color: red;
    background-color: #fafab6;
    font-size:20px;
    font-weight: bold;
    word-wrap: break-word;
}
table {
    table-layout: fixed;
    border-collapse: collapse;
    margin: 0 auto;
}
table thead tr,
table tbody tr:not(:last-of-type) {
    border-bottom: 1px solid red;
}
.t-thead, .t-tbody {
    overflow-x: scroll;
    overflow-y: auto;
    width: 100%;
    text-align: center;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scroll-behavior:smooth;
}
.t-thead table th,
.t-tbody table td {
    width: 100px;
    height: 45px;
    line-height: 45px;
    padding: 0 12px;
}
#contents {
    margin-bottom: 0;
}
</style>